<template>
  <section>
    <Table border :columns="columns1" :data="carList"></Table>
    <div style="margin: 10px;overflow: hidden">
      <div style="float: right;">
        <Page :total="total" :current="page" @on-change="changePage" show-total></Page>
      </div>
    </div>
  </section>
</template>
<script>
import { getCarList, selectCarList } from '../../api/api';
export default {
  data() {
    return {
      columns1: [
        {
          title: "id",
          key: "id",
        },
        {
          title: "品牌",
          key: "name",
        },
        {
          title: "所属",
          key: "cardType",
        },
        {
          title: '颜色',
          key: 'appearance'
        },
        {
          title: "自动/手动",
          key: "gearType",
        },
        {
          title: "车牌号",
          key: "licenseNum",
        },
        {
          title: "车座",
          key: "seatsNum",
        },
        {
          title: "油量",
          key: "engineModel",
        },
        {
          title: '日租价',
          key: 'dailyPrice'
        },
        {
          title: "单价",
          key: "rentalPrice",
        },
        {
          title: "租车公司",
          key: "company",
        },
        {
          title: "租车开始时间",
          key: "startTime",
        },
        {
          title: "租车结束时间",
          key: "endTime",
        },
        {
          title: '经度',
          key: 'longitude'
        },
        {
          title: "纬度",
          key: "latitude",
        },
        {
          title: "车辆图片",
          key: "imgSrc",
        },
        {
          title: "车辆租赁状态",
          key: "rentalStatus",
        }
      ],
      carList: [
        {
          id: "John Brown",
          name: 18,
          cardType: "New York No. 1 Lake Park",
          appearance: "2016-10-03",
          gearType: "",
          licenseNum: "",
          seatsNum: "",
          engineModel: "",
          dailyPrice: "",
          rentalPrice: "",
          company: "",
          startTime: "",
          endTime: "",
          longitude: "",
          latitude: "",
          imgSrc: "",
          rentalStatus: ""
        }
      ],
      page: 1,
      pageSize: 10,
      total: 0
    };
  },
  mounted() {
  },
  methods: {
    changePage() {
      getCarList().then(res => {
        console.log('获取车辆数据', res);
        this.carList = res.data.data;
        this.total = res.data.data.length;
        // selectCarList({
        //   page: this.page,
        //   total: this.pageSize
        // }).then(res => {
        //   console.log('查询工具');
        // })
      })
    }
  }
};
</script>

<style lang="scss" scoped>
.ivu-table-wrapper /deep/ {
	width: 100% !important;

	.ivu-table-header table, .ivu-table-body table, .ivu-table-tip table {
		width: 100% !important;
		table-layout: auto;
	}
  td {
    height: 20px;
  }
}
</style>